<template>
    <a-form layout="vertical" ref="ruleFormRef" :model="changePlan" :rules="rules">
        <a-row>
            <a-col :span="24">
                <a-form-item label="计划终止的版本" name="end">
                    <a-row v-if="disabled">
                        <a-col :span="24">
                            <div v-for="item of changePlan.end" :key="item.id">{{ item.versionNumber }}——{{ item.versionName }}</div>
                        </a-col>
                    </a-row>
                    <a-checkbox-group v-model:value="endVersion" @change="checkChange" v-else>
                        <div>
                            <a-checkbox v-for="item of list" :key="item.id" :value="item"> {{ item.versionNumber }}——{{ item.versionName }} </a-checkbox>
                        </div>
                    </a-checkbox-group>
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
</template>

<script lang="ts">
import { defineComponent, ref, unref, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    name: 'PlanEnd',
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false }
    },
    setup(props) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            list: [], // 版本列表
            endVersion: [], // 选中的终止版本数据
            changePlan: {
                end: []
            }
        });
        const rules = computed(() => {
            const rules = {
                end: [{ required: true, message: '终止版本不能为空', trigger: 'blur', type: 'array' }]
            };
            return props.disabled ? {} : rules;
        });
        const checkChange = (val: any[]) => {
            if (val.length) {
                state.changePlan = {
                    end: val.map(({ id: versionId, versionName, versionNumber, instanceId }) => ({
                        versionId,
                        versionName,
                        versionNumber,
                        instanceId
                    }))
                };
            } else {
                state.changePlan = {};
            }
        };
        const validate = () => {
            return new Promise((resolve) => {
                unref(ruleFormRef)
                    .validate()
                    .then(
                        () => {
                            resolve(true);
                        },
                        () => {
                            resolve(false);
                        }
                    );
            });
        };
        const init = () => {
            state.list = props.detail.versionDTOS;
            if (props.detail.changePlan) {
                state.changePlan = {
                    end: props.detail.changePlan.end
                };
                if (state.changePlan.end.length) {
                    state.endVersion = state.list.filter((item) => state.changePlan.end.find((elem) => elem.versionId === item.id));
                }
            }
        };
        init();
        return {
            ruleFormRef,
            ...toRefs(state),
            rules,
            checkChange,
            validate
        };
    }
});
</script>

<style scoped>
</style>